<template>
    <div id="wywtStatistics">
        <low-chart :title="title">
            <div id="wywtStatistics_box"></div>
        </low-chart>
    </div>
</template>

<script>
    import lowChart from 'components/content/lowChart/lowChart2'
    import echarts from "echarts";
    import {getRepairsCount} from "../../../network/home";

    export default {
        name: "wywtStatistics",
        data() {
            return {
                timer:null
            }
        },
        props: {
            title: {
                type: String,
                default: "统计类目"
            }
        },
        components: {
            lowChart
        },
        mounted() {
            this.setEchart()
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右中关闭')
            }
        },
        methods: {
            setEchart() {
                getRepairsCount().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data)
                        let myChart = echarts.init(document.getElementById("wywtStatistics_box"));

                        var dataStyle = {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                shadowBlur: 0,
                                shadowColor: '#00F5FF'
                            }
                        };
                        myChart.setOption({
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "#1E337C"
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#64D3EE'
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#1E337C"
                                    }
                                },
                                data: res.data.name
                            },
                            yAxis: {
                                type: 'value',
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "#1E337C"
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#64D3EE'
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#1E337C"
                                    }
                                }
                            },
                            series: [{
                                data:res.data.dataList,
                                type: 'line',
                                itemStyle: {
                                    normal: {
                                        color: '#64D3EE',
                                        borderColor: "#64D3EE",
                                        label: {
                                            show: true, //开启显示
                                            position: 'top', //在上方显示
                                            textStyle: { //数值样式
                                                color: '#64D3EE',
                                                fontSize: 12
                                            },
                                        }
                                    }
                                },
                                areaStyle: {
                                    color: '#DBD0F0',
                                    opacity:0.2
                                }
                            }]
                        });
                    }
                });


            }
        }
    }
</script>

<style scoped>
    #wywtStatistics {
        margin-top: 15px;
    }
    #wywtStatistics_box {
        width: 609px;
        height: 277px;
    }
</style>
